<template>
    <div class="navigator" :class="collapsed ? 'collapsed' : 'expanded'">
        <header>
            <div class="expanded">
                <img src="@/assets/img/logo@1x.png" title="logo" />
                <span>派迩基础公共平台</span>
            </div>
            <div class="collapsed">
                <img src="@/assets/img/logo-sm@1x.png" title="logo" />
            </div>
        </header>
        <div class="menu">
            <ul>
                <li>
                    <router-link to="/dashboard" active-class="active">
                        <img src="@/assets/img/dashboard@1x.png" title="dashboard" />
                        <span>仪表盘</span>
                    </router-link>
                </li>
                <li>
                    <router-link to="/services" active-class="active">
                        <img src="@/assets/img/service@1x.png" title="service" />
                        <span>服务管理</span>
                    </router-link>
                </li>
                <li>
                    <router-link to="/audit" active-class="active">
                        <img src="@/assets/img/audit@1x.png" title="log" />
                        <span>事件日志</span>
                    </router-link>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Navigator',
        computed: {
            collapsed() {
                return this.$store.state.navigator.collapsed;
            },
        },
    };
</script>

<style lang="scss" scoped>
    .navigator {
        width: 256px;
        height: 100%;
        min-height: 100vh;
        background: #1252D3;
        box-shadow: 0 8px 16px 0 rgba(23, 62, 156, .2);

        & > header {
            height: 214px;
            background: url("~@/assets/img/nav-bg@1x.png") no-repeat center center;

            & > div {
                display: flex;
                flex-direction: column;

                &.expanded img {
                    margin: 51px auto 27px;
                }

                span {
                    margin: auto;
                    width: 160px;
                    height: 28px;
                    font-family: Helvetica-Bold, sans-serif;
                    font-size: 20px;
                    font-weight: 700;
                    color: #FFF;
                    text-align: center;
                }
            }
        }

        & > div.menu {
            ul {
                padding-top: 56px;

                li {
                    height: 54px;

                    a {
                        display: inline-block;
                        width: 100%;
                        height: 100%;
                        border-left: 4px solid transparent;
                        opacity: .65;
                        color: #FFF;

                        img {
                            float: left;
                            margin: 19px 8px 19px 20px;
                        }

                        span {
                            float: left;
                            font-size: 14px;
                            font-weight: 500;
                            line-height: 54px;
                        }

                        &.active, &:hover {
                            opacity: 1;
                            background: rgba(255, 255, 255, .1);
                            border-left-color: #FFF;
                        }
                    }
                }
            }
        }

        &.expanded {
            & > header {
                & > div.collapsed {
                    display: none;
                }
            }
        }
        &.collapsed {
            width: 64px;

            & > header {
                height: 64px;

                & > div.expanded {
                    display: none;
                }
            }

            & > div.menu {
                ul {
                    padding-top: 20px;
                }

                span {
                    display: none;
                }
            }
        }
    }
</style>
